<template>
	<!-- 客户弹出框 -->
	<v-dialog v-model="customerCommentModel.dialog" width="1100">
		<v-card>
			<v-toolbar-title>选择客户信息</v-toolbar-title>
			<v-card-title>
				<v-row class="mt-2">
					<v-col cols="12" sm="3" md="2">
						<v-text-field label="客户编码" v-model="customerQuery.code" dense outlined>
						</v-text-field>
					</v-col>
					<v-col cols="12" sm="3" md="2">
						<v-text-field label="客户名称" v-model="customerQuery.name" dense outlined>
						</v-text-field>
					</v-col>

					<v-col cols="12" sm="2" md="2">
						<v-btn depressed color="primary" @click="loadPages">查询</v-btn>
						<v-btn class="ml-3" depressed color="primary" @click="refreshLoadPages">
							刷新</v-btn>
					</v-col>
				</v-row>

			</v-card-title>
			<v-card-text>
				<v-data-table :headers="customerHeaderList" :items="customerDataList" small fixed-header
					item-key="cCusCode" dense show-select single-select class="text-no-wrap"
					loading-text="正在加载请稍等......" :loading="customerLoading" :options.sync="customerOptions"
					:footer-props="vuetifyDefaultPage" :server-items-length="customerTotalCount"
					@item-selected="customerSingleCheckEvent">
				</v-data-table>
			</v-card-text>
			<v-card-actions>
				<v-spacer></v-spacer>
				<v-btn color="primary" class="mr-4" small tile :disabled="this.selectCustomerModel==null" @click="ok">
					确定
				</v-btn>
				<v-btn color="warning" class="mr-4" small tile @click="close">取消</v-btn>
			</v-card-actions>
		</v-card>
	</v-dialog>

</template>

<script>
	export default {
		name: 'CustomerDataList',
		props: {
			callBack: {
				type: Function, //参数类型：函数
			},
			customerCommentModel: {
				dialog: false,
				loadCustomerUrl: ``
			},
		},
		data: () => ({

			customerQuery: {
				code: '',
				name: '',
			},
			customerHeaderList: [],
			customerDataList: [],
			customerTotalCount: 0,
			customerLoading: true,
			customerOptions: { //页数
				page: 1,
				//每页行数
				itemsPerPage: 10
			},
			vuetifyDefaultPage: {
				'items-per-page-text': '每页个数',
				'items-per-page-options': [10, 20, 50, 100]
				// 'items-per-page-all-text': '100'
			},
			selectCustomerModel: null,
		}),
		watch: {
			customerOptions: {
				handler() {
					this.loadPages()
				},
				deep: true
			},
			customerCommentModel: {
				handler(newVal) {
					this.$emit('update:customerCommentModel', newVal)
					this.loadPages()
				},
				deep: true
			},
		},
		created() {
			this.getCustomerHeaderList()
		},
		methods: {

			async loadPages() {
				if (!this.customerCommentModel.dialog) {
					return
				}
				this.customerLoading = true
				var response = await this.$httpRequest({
					url: this.customerCommentModel.loadCustomerUrl + `?
							code=${this.customerQuery.code}&
							name=${this.customerQuery.name}&
							pageNumber=${this.customerOptions.page}&
							pageSize=${this.customerOptions.itemsPerPage}`,
					method: 'get',
				})
				if (response.status == 1) {
					this.customerDataList = response.data.result
					this.customerTotalCount = response.data.pagination.totalRecords
					this.customerLoading = false
				} else {
					this.$message.error(response.info)
				}
			},
			async refreshLoadPages() {
				this.customerQuery.code = ''
				this.customerQuery.name = ''
				await this.loadPages()
			},
			customerSingleCheckEvent(select) {
				if (select.value) {
					this.selectCustomerModel = select.item
				} else {
					this.selectCustomerModel = null
				}
			},
			ok() {
				this.$props.callBack(this.selectCustomerModel)
				this.close()
			},
			close() {
				this.selectCustomerModel = null
				this.customerCommentModel.dialog = false
			},
			getCustomerHeaderList() {
				this.customerHeaderList = [{
						text: '客户编码',
						align: 'left',
						value: 'cCusCode',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '客户名称',
						align: 'left',
						value: 'cCusName',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '客户分类编码',
						align: 'center',
						value: 'cCCCode',
						filterable: false,
						class: 'fixed'
					}
				]
			},
		}
	}
</script>

<style>
</style>
